<template>
  <div class="main">
    <a-layout>
      <a-layout-sider
        :style="{ height: '100%' }"
        v-model:collapsed="collapsed"
        theme="dark"
        collapsible
      >
        <!-- <div class="logo" style="color:white;font-weight:large;">运营后端</div> -->
        <a-menu theme="dark" mode="inline" v-model:selectedKeys="selectedKeys">
          <a-sub-menu key="sub1" style="margin-top: 100px">
            <template #title>
              <span>
                <CustomerServiceOutlined />
                <span>帮助中心</span>
              </span>
            </template>
            <a-menu-item key="2" @click="gotourl('/mainpage/faq', 'FAQ问题')"
              >FAQ问题</a-menu-item
            >
            <a-menu-item
              key="3"
              @click="gotourl('/mainpage/feedback', '用户反馈')"
              >用户反馈</a-menu-item
            >
          </a-sub-menu>

          <a-sub-menu key="sub2">
            <template #title>
              <span>
                <ToolOutlined />
                <span>运维工具</span>
              </span>
            </template>
            <a-menu-item key="4" @click="gotourl('/mainpage/link', '链路追踪')"
              >链路查询</a-menu-item
            >
            <a-menu-item key="5" @click="gotourl('/mainpage/debug', '拍搜调试')"
              >拍搜调试</a-menu-item
            >
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <a-layout-header
          style="
            display: flex;
            justify-content: space-between;
            height: 48px;
            line-height: 48px;
            border-bottom: solid 1px #ffffff;
            box-shadow: 0 2px 4px 0 rgb(0 0 0 / 7%);
            font-size: 14px;
          "
          :style="{ background: '#fff' }"
        >
          <div style="color: #606a78">
            {{ title.title }}<a-divider type="vertical" />运营后台
          </div>
          <!-- 退出登录 -->
          <div>
            <a-dropdown>
              <a class="ant-dropdown-link" @click.prevent>
                管理员
                <DownOutlined />
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item>
                    <a @click="logout">退出系统</a>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </a-layout-header>
        <a-layout-content
          :style="{
            margin: '10px 16px',
            padding: '24px',
            background: '#fff',
            minHeight: '100%',
          }"
        >
          <router-view ></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>
<script>
import { CustomerServiceOutlined, DownOutlined,ToolOutlined } from "@ant-design/icons-vue";
import { defineComponent, ref, reactive } from "vue";
import { get, post } from "@/common";
import { useRouter, useRoute } from "vue-router";

export default defineComponent({
  setup() {
    const title = reactive({ title: "FAQ问题列表" });
    const router = useRouter();
    const gotourl = (url, urlTitle) => {
      router.push({ path: url });
      title.title = urlTitle;
    };
    gotourl('/mainpage/faq')
    const logout = () => {

      
    };
    return {
      title,
      selectedKeys: ref(["1"]),
      collapsed: ref(true),
      gotourl,
    };
  },
  components: {
    DownOutlined,
    ToolOutlined,
    CustomerServiceOutlined,
  },
  data() {
    return {
      isVisible: false, //隐藏显示
    };
  },
  methods: {
    change: function () {
      this.isVisible = !this.isVisible;
    },
  },
});
</script>
<style scoped>
.main {
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;

  display: flex;
  flex-direction: column;
}
.nav {
  margin-bottom: 1px;
  display: flex;
  font-weight: 50;
  border-bottom: solid 1px #f0f1f2;
  width: 100%;
  flex: none;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
}

.nav_title {
  margin: 15px;
  font-size: large;
  color: black;
  font-weight: bold;
}
</style>
